<template>
    <div class="alarmRecord">
        <div class="alarmRecord-title">
            <span>{{value}}报警记录</span>
            <a-space>
                <a-select style="width: 140px"
                          allowClear
                          placeholder="请选择报警类型"
                          @change="selectChange">
                  <a-select-option :value="item.value" v-for="(item, key) in alarmType" :key="key">
                    {{item.label}}
                  </a-select-option>
                </a-select>
                <a-date-picker style="width: 140px" :value="value" :allowClear="false" @change="timeOnChange" />
            </a-space>
        </div>
        <a-list item-layout="vertical" class="alarmRecord-list" :pagination="pagination" :data-source="listData">
            <a-list-item slot="renderItem" class="alarmRecord-list-item" key="item.title" slot-scope="item">
                <span v-if="!loading">
                   <kIcon :type="alarmType[item.alarmContent].icon" :style="{fontSize: '27px', 'margin': '0 15px 0 0'}"/>
                </span>
                <span v-if="!loading">
                      <p>{{item.dateTime}} {{alarmType[item.alarmContent].label}}报警 </p>
                    <p v-if="[3, 2].indexOf(item.alarmContent) > -1">报警值：143/87mmHg</p>
                    <p v-else>位置：{{item.site}}</p>
                </span>
                <a-skeleton :loading="loading" active avatar>
                    <a-list-item-meta :description="item.description" v-if="loading">
                        <a slot="title" :href="item.href">{{ item.title }}</a>
                        <a-avatar slot="avatar" :src="item.avatar" />
                    </a-list-item-meta>
                </a-skeleton>
            </a-list-item>
        </a-list>
    </div>
</template>

<script>
    import moment from "moment";
    import {alarmType} from '@/config/configuration';
    import {alarmRecord} from "@/services/monitoring";
    import kIcon from '../../../utils/k-icon';

    export default {
        name: "alarmRecord",
        components: {kIcon},
        data() {
            return{
                alarmType,
                value: '',
                loading: false,
                listData: [],
                pagination: {
                    total: 100,
                    size: 'small',
                    onChange: (page) => {
                        this.init(page);
                    },
                    pageSize: 10,
                },
                actions: [
                    { type: 'star-o', text: '156' },
                    { type: 'like-o', text: '156' },
                    { type: 'message', text: '2' },
                ],
            }
        },
        created() {
            this.value = moment(new Date().getTime()).format('YYYY-MM-DD');
            this.init();
        },
        methods: {
            init(page) {
                this.loading = true;
                this.listData = [{}, {}, {}]
                    alarmRecord({
                    page: page||1,
                    pageSize: this.pagination.pageSize
                }).then(({data}) => {
                    this.loading = false;
                    this.listData = data.list;
                    this.pagination.total = data.total;
                })
            },
            timeOnChange(v, dateString) {
                this.value = dateString;
                this.init();
            },
            selectChange() {  this.init();},
        }
    }
</script>

<style lang="less">
.alarmRecord{
    height: 100%;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    &-list{
        height: 100%;
        display: flex;
        flex-direction: column;
        .ant-spin-nested-loading{
            height: calc(100% - 60px)!important;
            box-sizing: border-box;
            overflow: auto;
            max-height: calc(100vh - 270px)!important;
            min-height: 600px;
        }
        p{
            margin: 0;
            padding: 0;
        }
        &-item{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-left: 42px;
            position: relative;
            span:first-child{
                display: inline-flex;
                align-items: center;
                position: absolute;
                left: -42px;
            }
        }
    }
    &-title{
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        span{
            &:first-child{
                color: rgba(80, 80, 80, 1);
                font-size: 16px;
            }
        }
    }
}
.alarmRecord-list .ant-spin-nested-loading::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.alarmRecord-list .ant-spin-nested-loading::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}
.alarmRecord-list .ant-spin-nested-loading::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    transition: background-color .3s ease-in-out;
}
.alarmRecord-list .ant-spin-nested-loading:hover{
    &::-webkit-scrollbar-thumb {
        transition: background-color .3s ease-in-out;
        background-color: rgba(204,204,204,0.44);
    }
}
</style>
